<template>
  <div class="main">
    <div class="header">
      <el-form :inline="true" :model="form" class="demo-form-inline" style="padding-top: 20px">
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="状态">
            <el-option label="冻结" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否收藏">
          <el-select v-model="form.collect" placeholder="是否收藏">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select" icon="el-icon-search">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <el-upload
          class="avatar-uploader"
          action="/api/system/uploadHomepage"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="token"
          :before-upload="beforeAvatarUpload"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div v-for="img in data" :key="img.url" style="display: inline-block;vertical-align: top;margin-top: 20px">
        <div style="display: inline-block;vertical-align: top;width: 150px;height: 150px;margin-right: 10px">
          <el-image
              style="width: 150px; height: 150px"
              :src="img.url"
              :preview-src-list="urlList"
          />
        </div>
        <div style="width: 150px;height:150px;display: inline-block;vertical-align: top;margin-right: 30px;">
          <span style="font-size: 13px;margin-top: 10px">上传者：{{ img.user }}</span><br><br>
          <span style="font-size: 13px">上传时间：{{ img.time }}</span><br><br>
          <el-switch
              style="display: block"
              v-model="img.collect"
              active-color="rgb(225 225 225)"
              inactive-color="rgb(250 151 61)"
              active-text="未收藏"
              active-value="0"
              inactive-text="收藏"
              inactive-value="1"
              @change="change(img)"
          >
          </el-switch>
          <br>
          <el-switch
              style="display: block"
              v-model="img.status"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="停用"
              active-value="0"
              inactive-text="启用"
              inactive-value="1"
              @change="change(img)"
          >
          </el-switch>
          <br>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/Axios/axios";

export default {
  data() {
    return {
      form: {},
      data: [],
      urlList: [],
      token: {
        "token": window.sessionStorage.getItem("token"),
      },
    }
  },
  mounted() {
    this.select();
  },
  methods: {
    select() {
      axios.post("system/homeImageList", this.form).then(res => {
        if (res.code === 200) {
          this.data = res.data;
          res.data.forEach(item => {
            this.urlList.push(item.url);
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch(() => {
      });
    },
    reset() {
      this.form = {};
      this.select();
    },
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.$message.success('上传成功');
        this.select();
      }
    },
    beforeAvatarUpload(file) {
      const imageFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
      const isImage = imageFormats.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error('上传头像图片只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isImage && isLt2M;
    },
    change(item) {
      axios.post("system/changeHomeImage", item).then(res => {
        if(res.code === 200) {
          this.$message.success("修改成功");
          this.select();
        }else{
          this.$message.error(res.msg);
        }
      }).catch(() => {});
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: #65b5d5 1px dashed;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.body {
  display: inline-block;
}
</style>